@import "../../assets/styles/helper.less";

.statistics {
  >ul{
    display: flex;
    justify-content: center;
    align-items: center;
    li {
      border: @border;
      box-shadow: @box-shadow;
      overflow: hidden;
      cursor: pointer;
      position: relative;
      background: @color-block;
      &:first-child {
        border-radius: @border-radius 0 0 @border-radius;
      }
      &:last-child {
        border-radius: 0 @border-radius @border-radius 0;
      }
      + li {
        border-left: none;
      }
      &.active {
        background: @color-hover;
      }
      .text {
         margin: 8px;
         p {
           &:first-child {
             font-size: 16px;
           }

           &:nth-child(2) {
             font-size: 12px;
             color: @color-text-light;
           }
           &:last-child {
             position: absolute;
             right: 8px;
             bottom: 0;
             font-size: 40px;
           }
         }
       }
      .graph {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -40px;
        svg {
          height: 70px;
          max-width: 100%;
          margin-left: -1px;
        }
      }
    }
  }
  @media(min-width: 500px){
    ul{
      li{
        .text {
          p {
            &:first-child {
            }
            &:nth-child(2) {
              font-size: 8px;
            }
            &:last-child {
              position: relative;
              right: 0;
              top: -8px;
            }
          }
        }
        .graph {
          margin-top: -78px;
          svg {
            height: 60px;
            width: 239px;
          }
        }
      }
    }
  }
  .history-details{
    margin: 0;
    padding: 16px;
    border: @border;
    border-radius: @border-radius;
    box-shadow: @box-shadow;
    @media(min-width: 500px){
      margin: 16px;
    }
  }
}